<template>
	<view class="classify">
		<image src="../../static/image/calssfilbg.png" style="width: 100%;height:100%;position: absolute;top: 0;"
			mode=""></image>
		<view class="topClassify">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="classList">
					<view class="classitem" v-for="(item,index) in categoryList" :key="index"
						@click="handleLeftcontent(index)">
						<image :src="item.image" style="width: 88rpx;height: 88rpx;border-radius: 80rpx;" mode="">
						</image>
						<view :class="currIndex == index ?'colored' : ''" style="margin-top: 10rpx;">
							{{item.title}}
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- style="background-color: pink;" -->
			<view class="leftcontent" @click="show=true">
				<view class="">
					全部
				</view>
				<image src="../../static/image/all.png" style="width: 34rpx;height: 34rpx;" mode=""></image>
			</view>
		</view>

		<view v-if="!show" class="contentSx">
			<view class="content_right_top">
				<view class="tabsItem" :class="volumeIndex != null ?'tabsItemed' :''" @click="handleVolume">
					<view class="">
						销量
					</view>
					<image v-if="volumeIndex==null" src="../../static/image/bot.png" style="width: 28rpx;height: 28rpx;"
						mode=""></image>
					<image v-if="volumeIndex==true" src="../../static/image/up.png" style="width: 28rpx;height: 28rpx;"
						mode=""></image>
					<image v-if="volumeIndex==false" src="../../static/image/down1.png"
						style="width: 28rpx;height: 28rpx;" mode=""></image>
				</view>
				<view class="tabsItem" :class="priceIndex != null ?'tabsItemed' :''" @click="handlePrice">
					<view class="">
						价格
					</view>
					<image v-if="priceIndex==null" src="../../static/image/bot.png" style="width: 28rpx;height: 28rpx;"
						mode=""></image>
					<image v-if="priceIndex==true" src="../../static/image/up.png" style="width: 28rpx;height: 28rpx;"
						mode=""></image>
					<image v-if="priceIndex==false" src="../../static/image/down1.png"
						style="width: 28rpx;height: 28rpx;" mode=""></image>
				</view>
			</view>
		</view>


		<cc-twoCate colors="#fa436a" :current="currIndex" :classList="scendList" :dataList="productslist"
			:hideShow="true" @cateClick="cateClick" @itemClick="itemClick" @addCart="addCart"
			@bottomLoad="bottomLoad"></cc-twoCate>

		<!-- 	<view class="contentBox">
			<view class="content_left">
				<view class="content_left_item" :class="currIndex==index?'content_left_itemed':''"
					v-for="(item,index) in categoryList" :key="index" @click="handleLeftcontent(index)">
					{{item.title}}
				</view>
			</view>

			<view class="content_right">
				<view class="content_right_top">
					<view class="tabsItem" :class="volumeIndex != null ?'tabsItemed' :''" @click="handleVolume">
						<view class="">
							销量
						</view>
						<image v-if="volumeIndex==null" src="../../static/image/bot.png"
							style="width: 28rpx;height: 28rpx;" mode=""></image>
						<image v-if="volumeIndex==true" src="../../static/image/up.png"
							style="width: 28rpx;height: 28rpx;" mode=""></image>
						<image v-if="volumeIndex==false" src="../../static/image/down1.png"
							style="width: 28rpx;height: 28rpx;" mode=""></image>
					</view>
					<view class="tabsItem" :class="priceIndex != null ?'tabsItemed' :''" @click="handlePrice">
						<view class="">
							价格
						</view>
						<image v-if="priceIndex==null" src="../../static/image/bot.png"
							style="width: 28rpx;height: 28rpx;" mode=""></image>
						<image v-if="priceIndex==true" src="../../static/image/up.png"
							style="width: 28rpx;height: 28rpx;" mode=""></image>
						<image v-if="priceIndex==false" src="../../static/image/down1.png"
							style="width: 28rpx;height: 28rpx;" mode=""></image>
					</view>
				</view>


				<view class="dataList">
					<view class="dataItem" v-for="(item,index) in productslist" :key="item.id"
						@click="handleDetail(item)">
						<image :src="item.image" style="width: 160rpx;height: 160rpx;border-radius: 20rpx;" mode="">
						</image>
						<view class="product">
							<view class="name">
								{{item.name}}
							</view>
							<view class="desc">
								补充维C | 低卡轻蔬
							</view>
							<view class="bottom">
								<view class="price">
									₱{{item.price}} <text style="color: #BBBBBB;font-size: 24rpx;">/份</text>
								</view>
								<image src="../../static/image/tocar.png" style="width: 40rpx;height: 40rpx;" mode="">
								</image>
							</view>
						</view>
					</view>
					<view class="" style="height: 150rpx;"></view>
				</view>
			</view>
		</view> -->

		<u-popup :show="show" @close="show=false" mode="top">
			<view class="popContentBox">
				<view class="titleBox">
					<view class="">
						全部
					</view>
					<u-icon name="close-circle" size="25" @click="show=false"></u-icon>
				</view>

				<view class="dataList">
					<view class="dataItem" v-for="(item,index) in categoryList" @click="handleLeftcontent(index)">
						<image :src="item.image" style="width: 88rpx;height: 88rpx;border-radius: 80rpx;" mode="">
						</image>
						<view :class="currIndex == index ?'colored' : ''">
							{{item.title}}
						</view>
					</view>
				</view>

			</view>
		</u-popup>


		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :localdata="goodsInfo"
			:mode="skuMode" @add-cart="handleAddcart" buyNowBackgroundColor="#FF3D3D"></vk-data-goods-sku-popup>


	</view>
</template>

<script>
	import {
		categoryList,
		productslist,
		addshopcar,
		cardNum
	} from "@/api/api.js"
	export default {
		data() {
			return {
				currIndex: 0,
				show: false,
				categoryList: [],
				page: 1,
				page_size: 10,
				category_id: "",
				productslist: [],
				nullFlag: false,
				volumeIndex: null,
				priceIndex: null,
				is_price: null, //价格
				sold_count: null, //销量
				windowHeight: null,
				scendList: [],
				skuKey: false, // 是否打开SKU弹窗
				skuMode: 1, // SKU弹窗模式
				goodsInfo: {}, // 后端返回的商品信息,
				is_all: 1

			}
		},
		onReady() {
			uni.getSystemInfo({
				success: function(res) {
					// console.log("屏幕高度", res.windowHeight)
					this.windowHeight = res.windowHeight
				}
			})
		},
		async onLoad() {
			await this.handlecategoryList()
			await this.handleproductslist()
		},
		onReachBottom() {
			this.page++;
			this.handleproductslist();
			this.nullFlag = true
		},
		onShow() {
			if (uni.getStorageSync('classifyIndex') > 0) {
				// console.log("classifyIndex", uni.getStorageSync('classifyIndex'))
				this.currIndex = uni.getStorageSync('classifyIndex') - 1
				if (this.categoryList[this.currIndex].children.length == 0) {
					this.scendList = []
					this.productslist = []
					// this.handleproductslist()
				} else {
					this.scendList = this.categoryList[this.currIndex].children
					this.scendList.forEach((item, index) => {
						this.scendList[index].name = item.title
					})
					this.category_id = this.scendList[0].id
					this.handleproductslist()
				}

			} else {
				this.currIndex = 0
				if (this.categoryList[0].children.length > 0) {
					// console.log("4444444")
					this.scendList = this.categoryList[0].children
					this.scendList.forEach((item, index) => {
						this.scendList[index].name = item.title
					})
					this.category_id = this.scendList[0].id
					this.handleproductslist()
				} else {
					// console.log("55555")
					this.scendList = []
					this.productslist = []
				}

			}
			uni.$emit('updateData', "更新的数据")
		},
		onHide() {
			localStorage.removeItem("classifyIndex")
		},
		methods: {
			handleLeftcontent(index) {
				this.currIndex = index
				this.is_all = 1
				if (this.categoryList[index].children.length == 0) {
					// console.log("11111")
					this.scendList = []
					this.productslist = []
				} else {
					this.scendList = this.categoryList[index].children
					// console.log("222222", this.scendList)
					this.scendList.forEach((item, index) => {
						this.scendList[index].name = item.title
					})
					this.category_id = this.scendList[0].id
					this.page = 1
					this.handleproductslist()
				}
				this.show = false
				this.nullFlag = false
				uni.$emit('updateData', "更新的数据")
			},

			async handlecategoryList() {
				let res = await categoryList()
				res.data.forEach((item, index) => {
					item.children.unshift({
						title: "全部",
						id: item.id
					})
				})
				this.categoryList = res.data;
				this.scendList = this.categoryList[0].children
				this.scendList.forEach((item, index) => {
					this.scendList[index].name = item.title
				})
				this.category_id = this.scendList[this.currIndex].id
			},
			async handleproductslist() {
				let res = await productslist({
					page: this.page,
					page_size: this.page_size,
					category_id: this.category_id,
					is_price: this.is_price,
					sold_count: this.sold_count,
					is_all: this.is_all,
				})
				if (this.nullFlag == false) {
					this.productslist = []
				}
				res.data.product.data.forEach((item, index) => {
					this.productslist.push(item)
				})
				this.productslist.forEach((item, index) => {
					this.productslist[index].title = item.name
					this.productslist[index].img = item.image
					this.productslist[index].money = item.price
				})

			},

			handleVolume() {
				if (this.volumeIndex == null) {
					this.volumeIndex = true
					return
				}
				this.volumeIndex = !this.volumeIndex
				if (this.volumeIndex) {
					this.sold_count = 1
				} else {
					this.sold_count = 2
				}
				this.productslist = []
				this.handleproductslist()
			},
			handlePrice() {
				if (this.priceIndex == null) {
					this.priceIndex = true
					return
				}
				this.priceIndex = !this.priceIndex
				if (this.priceIndex) {
					this.is_price = 1
				} else {
					this.is_price = 2
				}
				this.productslist = []
				this.handleproductslist()
			},

			handleDetail(item) {
				// console.log("33", item)
				uni.navigateTo({
					url: `../home/detail?id=${item.id}`
				})
			},

			// ===============
			cateClick(item, index) {
				// console.log("ite??????????????m", item)
				if (index == 0) {
					this.is_all = 1
				} else {
					this.is_all = 0
				}
				this.handlescondcontent(index)
			},
			handlescondcontent(index) {
				this.category_id = this.scendList[index].id
				this.page = 1
				this.productslist = []
				this.handleproductslist()
			},
			bottomLoad() {
				// console.log("收到啦==========")
				this.page++;
				this.handleproductslist();
				this.nullFlag = true
			},

			itemClick(e) {
				// console.log("eeeeeeeee",e)
				uni.navigateTo({
					url: `../home/detail?id=${e.id}`
				})
			},
			addCart(e) {
				// console.log("tocart", this.productslist[e])
				let that = this
				that.goodsInfo = {
					"_id": this.productslist[e].sku_list[0].id,
					"name": this.productslist[e].sku_list[0].sku_name,
					"goods_thumb": this.productslist[e].image,
					"sku_list": this.productslist[e].sku_list,
					"spec_list": this.productslist[e].spec_list
				}
				that.skuKey = true;
			},

			async handleAddcart(selectShop) {
				// console.log("selectShop", selectShop)
				let data = {
					products_id: selectShop.products_id,
					sku_num_id: selectShop.id,
					num: selectShop.buy_num
				}
				// console.log("data", data)
				let res = await addshopcar(data)
				uni.showToast({
					title: res.message,
					icon: "none",
					duration: 2000
				});
				if (res.code == 1000) {
					this.skuKey = false;
					this.handleCarnum()
				}
			},
			async handleCarnum() {
				let res = await cardNum()
				if (res.data > 0) {
					uni.setTabBarBadge({
						index: 2,
						text: res.data.toString()
					})
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	.colored {
		color: #439B05;
	}

	.contentSx {
		width: 100%;
		height: 82rpx;
		background-color: #ffffff;
		z-index: 999999;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.content_right_top {
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 33rpx;

			.tabsItem {
				display: flex;
				align-items: center;
				margin-left: 50rpx;
			}
		}
	}

	.popContentBox {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		z-index: 9999;

		.titleBox {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;
		}

		.dataList {
			display: flex;
			flex-wrap: wrap;

			.dataItem {
				text-align: center;
				margin-left: 40rpx;
				margin-bottom: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
			}
		}

	}

	.classify {
		height: 100%;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;

		.topClassify {
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.scroll-view_H {
				white-space: nowrap;
				width: 95%;
			}

			.classList {
				width: 95%;
				// background-color: pink;
				display: flex;
				overflow: auto;

				.classitem {
					width: 120rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 28rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 15rpx;
				}
			}

			.leftcontent {
				width: 120rpx;
				height: 100rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #439B05;
				line-height: 28rpx;
				text-align: center;

			}
		}

		.contentBox {
			width: 100%;
			flex-grow: 1;
			background: #F5F5F5;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			z-index: 99;
			margin-top: 10rpx;
			display: flex;


			.content_left {
				width: 200rpx;
				height: 75vh;
				overflow: auto;

				.content_left_item {
					width: 100%;
					height: 112rpx;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 30rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.content_left_item:nth-child(1) {
					border-radius: 40rpx 0rpx 0rpx 0rpx;
				}

				.content_left_itemed {
					background-color: #ffffff;
				}
			}

			.content_right {
				width: 550rpx;
				background-color: #ffffff;
				height: 100%;
				border-radius: 0rpx 40rpx 0rpx 0rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				.content_right_top {
					display: flex;
					padding: 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 33rpx;

					.tabsItem {
						display: flex;
						align-items: center;
						margin-left: 50rpx;
					}
				}

				.dataList {
					margin-top: 20rpx;
					height: 100%;
					overflow: auto;

					.dataItem {
						display: flex;

						.product {
							width: 320rpx;
							height: 180rpx;
							padding-bottom: 20rpx;
							box-sizing: border-box;
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							border-bottom: 2rpx solid #F5F5F5;

							.name {
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 33rpx;
								width: 320rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
							}

							.desc {
								font-size: 20rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #439B05;
								line-height: 23rpx
							}

							.bottom {
								display: flex;
								width: 100%;
								justify-content: space-between;

								.price {
									font-size: 28rpx;
									font-family: DIN, DIN;
									font-weight: 500;
									color: #FF3D3D;
									line-height: 33rpx;
								}
							}
						}
					}


				}
			}
		}
	}
</style>